<div id="Welcome">
  <div id="WelcomeContent">
    Welcome to MyPetStore!
  </div>
</div>

<div id="Main">
  <div id="Sidebar">
    <!--左侧导航栏-->
    <div id="SidebarContent">
      <a href="category?categoryId=FISH"><img src="assets/images/fish_icon.gif" /></a>
      <br/> Saltwater, Freshwater <br/>
      <a href="category?categoryId=DOGS"><img src="assets/images/dogs_icon.gif" /></a>
      <br /> Various Breeds <br />
      <a href="category?categoryId=CATS"><img src="assets/images/cats_icon.gif" /></a>
      <br /> Various Breeds, Exotic Varieties <br />
      <a href="category?categoryId=REPTILES"><img src="assets/images/reptiles_icon.gif" /></a>
      <br /> Lizards, Turtles, Snakes <br />
      <a href="category?categoryId=BIRDS"><img src="assets/images/birds_icon.gif" /></a>
      <br /> Exotic Varieties
    </div>
  </div>

  <div id="inform" [style.display]="isVisible ? 'block' : 'none'">
    <ul>
      <li *ngFor="let product of productList">
        <span>{{ product.name }}</span><br>
        <span>ID: {{ product.productId }}</span>
      </li>
    </ul>
  </div>

  <div id="MainImage">
    <div id="MainImageContent">
      <!--中间显示栏-->
      <map name="estoremap">
        <area alt="BIRDS" coords="72,2,280,250" href="category?categoryId=BIRDS" shape="rect"
              (mouseover)="showInform($event)" (mouseleave)="hideInform()"/>
        <area alt="FISH" coords="2,180,72,250" href="category?categoryId=FISH" shape="rect" (mouseover)="showInform($event)" (mouseleave)="hideInform()"/>
        <area alt="DOGS" coords="60,250,130,320" href="category?categoryId=DOGS" shape="rect" (mouseover)="showInform($event)" (mouseleave)="hideInform()"/>
        <area alt="REPTILES" coords="140,270,210,340" href="category?categoryId=REPTILES" shape="rect" (mouseover)="showInform($event)" (mouseleave)="hideInform()"/>
        <area alt="CATS" coords="225,240,295,310" href="category?categoryId=CATS" shape="rect" (mouseover)="showInform($event)" (mouseleave)="hideInform()"/>
        <area alt="BIRDS" coords="280,180,350,250" href="category?categoryId=BIRDS" shape="rect" (mouseover)="showInform($event)" (mouseleave)="hideInform()"/>
      </map>
      <img height="355" src="assets/images/splash.gif" align="middle" usemap="#estoremap" width="350" />
    </div>
  </div>
</div>
